<!-- 天气选择 -->
<template>
	<view class="tool-weather" @touchmove.stop.prevent>
		<view class="weather-select" v-if="boxState" @click="hideBox">

			<view :class="'select-box'+(listState?' show':'')" @click.stop="">
				<view class="top_view">
					<view class="top_bg"></view>
					<text>{{title}}</text>
				</view>
				<view class="filter-box">
					<input type="text" v-model="key" placeholder="输入关键字">
				</view>
				<scroll-view scroll-y class="scroll" @scrolltolower="getList" @touchmove.stop>
					<view class="list_view" v-for="(item,index) in lists" :key="index">
						<view class="item_text" @click="select(item)">
							<text>{{item.$label || '-'}}</text>
						</view>
						<view class="view_line"></view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				boxState: false,
				listState: false,
				listData: [],
				lists: [],
				key: '',
				type: "", //类型 1.车牌号 2、挂车牌号 3、驾驶员 4、押运员  5.货物名称 6、托运方名称 7、装货方 8、收获方 9、途径路线
				index: 0,
				current: 1,
				pages: -1,
			};
		},
		watch: {
			key(key) {
				this.handleGetList();
			}
		},
		methods: {
			handleGetList() {
				this.timer && clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.getList(true);
				}, 500)
			},
			getList(isRefresh = false) {
				if (isRefresh === true) {
					this.current = 1;
					this.pages = -1;
					this.lists = [];
				} else {
					this.current++;
				}
				if (this.pages == -1 || this.pages >= this.current) {
					this.getData(this.key, this.current)
						.then(res => {
							this.pages = res.pages;
							this.lists.push(...res.records);
							// console.log(this.lists);
						}).catch(() => {
							// console.log('catch');
						});
					if (!this.boxState) {
						this.boxState = true;
						this.listState = true;
						uni.hideLoading()
					}
				}
			},
			hideBox() {
				this.boxState = false;
				this.listState = false;
			},
			showBox(options) {
				uni.showLoading();
				options = Object.assign({
					// 下拉选提示文字
					title: "请选择",
					// 返回值时携带的父级额外内容
					data: null,
					// 默认搜索的文字
					key: '',
					// 获取数据的方法
					getData: null
				}, options);
				this.title = options.title;
				this.data = options.data;
				this.key = options.key;
				this.getData = options.getData;
				this.lists = []; // 清空之前的结果
				this.handleGetList();
			},
			select(item) {
				const res = {
					item,
					data: this.data
				};
				this.$emit('change', res)
				this.hideBox()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-box {
		input {
			border: 1px solid #dcdfe6;
			padding: 5px 10px;
			border-radius: 4px;
			font-size: 28rpx;
		}
	}

	.item_text {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;

		text {
			font-size: 28rpx;
		}
	}

	.view_line {
		display: none;
		height: 1rpx;
		background-color: #F2F2F2;
		margin: 0 20rpx;
	}

	.tool-weather {


		.tool-input {
			height: inherit;
			line-height: inherit;
			font-size: inherit;
			min-height: 0;
		}

		.weather-select {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 99;



			.select-box {
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0 0;
				padding: 10rpx 20rpx 10px;
				transform: translateY(100%);
				transition: all 0.4s;
				// height: 600rpx;

				.scroll {
					height: 530rpx;
				}

				.top_view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 80rpx;



					.top_bg {
						width: 100rpx;
						height: 8rpx;
						background-color: #dcdfe6;
						border-radius: 5rpx;

					}

					text {
						margin-top: 10rpx;
						font-size: 32rpx;
					}
				}

				.label {
					font-size: 30rpx;
					line-height: 3em;
					padding-left: 0.25em;
				}

				.select-list {
					.select-item {
						float: left;
						font-size: 30rpx;
						min-width: 3em;
						padding: 0 1em;
						text-align: center;
						line-height: 2.5em;
						border-radius: 0.5em;
						background-color: #eee;
						margin: 0 0.25em 0.6em;
						box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
					}

					&::after {
						content: "";
						clear: both;
						display: block;
						height: 0;
					}
				}

				&.show {
					transform: translateY(0);
				}
			}
		}
	}
</style>